import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_picker/Picker.dart';
import 'package:units/global.dart';

// 单位换算
class PowerPage extends StatefulWidget {
  PowerPage({Key key, this.name, this.unitData}) : super(key: key);
  final String name;
  final List unitData;
  @override
  _PowerPageState createState() => _PowerPageState();
}

class _PowerPageState extends State<PowerPage> {
  var _checkedUnit;
  var _pickerData = [];
  String _originText = '10';
  TextEditingController _originTextController = TextEditingController();

  @override
  void initState() {
    _pickerData = widget.unitData.map((unit) => unit['name']).toList();
    _originTextController.text = _originText;
    super.initState();
  }

  showPickerModal(BuildContext context) {
    Picker(
      cancelTextStyle: TextStyle(color: Global.primaryColor),
      confirmTextStyle: TextStyle(color: Global.primaryColor),
      cancelText: '取消',
      confirmText: '确定',
      adapter: PickerDataAdapter<String>(pickerdata: _pickerData),
      changeToFirst: true,
      hideHeader: false,
      onConfirm: (Picker picker, List value) {
        var val =
            picker.adapter.text.replaceAll('[', '').replaceAll(']', '').trim();
        setState(() {
          _checkedUnit =
              widget.unitData.where((unit) => unit['name'] == val).toList()[0];
        });
      },
    ).showModal(this.context);
  }

  List<Widget> renderUnits() {
    List<Widget> list = [];
    if (_checkedUnit == null || _originText == '') return list;
    _checkedUnit['units'].forEach((unit) {
      list.add(
        Container(
          decoration: BoxDecoration(
            border: Border(
              bottom: BorderSide(
                width: 1,
                color: Global.fontSecondColor.withOpacity(.2),
              ),
            ),
          ),
          child: Row(
            children: [
              Container(
                width: 120,
                padding: EdgeInsets.all(10),
                decoration: BoxDecoration(
                  border: Border(
                    right: BorderSide(
                      width: 1,
                      color: Global.fontSecondColor.withOpacity(.2),
                    ),
                  ),
                ),
                child: Text(
                  unit['name'],
                  style: TextStyle(
                    color: Global.fontColor,
                    fontSize: 11,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  padding: EdgeInsets.only(left: 10),
                  child: Text(
                    (double.parse(_originText) * unit['times']).toString(),
                    style: TextStyle(
                      color: Global.fontColor,
                      fontSize: 11,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      );
    });
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('${widget.name}单位换算', style: TextStyle(fontSize: 14)),
        elevation: 0,
        backgroundColor: Global.primaryColor,
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                margin: EdgeInsets.all(15),
                padding: EdgeInsets.all(10),
                decoration: BoxDecoration(
                  color: Global.fontColor.withOpacity(.03),
                  border: Border.all(
                    color: Global.fontColor.withOpacity(.5),
                  ),
                  borderRadius: BorderRadius.circular(5),
                ),
                child: Row(
                  children: [
                    Expanded(
                      child: ConstrainedBox(
                        constraints: BoxConstraints(
                          maxWidth: 100,
                        ),
                        child: TextField(
                          maxLines: 1,
                          style: TextStyle(
                            color: Global.fontColor,
                            fontSize: 14,
                          ),
                          controller: _originTextController,
                          inputFormatters: [
                            WhitelistingTextInputFormatter.digitsOnly
                          ],
                          keyboardType: TextInputType.number,
                          decoration: InputDecoration.collapsed(
                            hintText: '输入需要换算的单位值',
                            hintStyle: TextStyle(
                              color: Global.fontSecondColor.withOpacity(0.5),
                              fontSize: 14,
                            ),
                          ),
                          onChanged: (text) {
                            setState(() {
                              _originText = text;
                            });
                          },
                        ),
                      ),
                    ),
                    InkWell(
                      onTap: () {
                        showPickerModal(context);
                      },
                      child: Container(
                        child: Row(
                          children: [
                            Text(
                              _checkedUnit == null
                                  ? '选择单位'
                                  : _checkedUnit['name'],
                              style: TextStyle(
                                color: Global.fontColor,
                                fontSize: 13,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                            Icon(
                              Icons.arrow_drop_down,
                              color: Global.fontColor,
                              size: 20,
                            ),
                          ],
                        ),
                      ),
                    )
                  ],
                ),
              ),
              Container(
                margin: EdgeInsets.all(15),
                decoration: BoxDecoration(
                  border: Border(
                    top: BorderSide(
                      width: 1,
                      color: Global.fontSecondColor.withOpacity(.2),
                    ),
                    right: BorderSide(
                      width: 1,
                      color: Global.fontSecondColor.withOpacity(.2),
                    ),
                    left: BorderSide(
                      width: 1,
                      color: Global.fontSecondColor.withOpacity(.2),
                    ),
                  ),
                ),
                child: Column(
                  children: renderUnits(),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}
